<template>
  <div>
    <el-dialog
      title="提示"
      :visible="addDialogDepart"
      width="30%"
      @close="closeDialog"
    >
      <!-- :model  :rules  prop  v-model -->
      <el-form ref="form" :rules="rules" :model="form" label-width="120px">
        <el-form-item label="部门名称" prop="name">
          <el-input v-model="form.name" />
        </el-form-item>
        <el-form-item label="部门编码" prop="code">
          <el-input v-model="form.code" />
        </el-form-item>
        <el-form-item label="部门负责人" prop="manager">
          <el-select v-model="form.manager" placeholder="请选择部门负责人">
            <el-option
              v-for="item in loderList"
              :key="item.id"
              :label="item.username"
              :value="item.id"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="部门介绍" prop="introduce">
          <el-input v-model="form.introduce" type="textarea" />
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="closeDialog">取 消</el-button>
          <el-button type="primary"> 确 定 </el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>
<script>
import { getsimplementlistApi } from '@/api/departments'
export default {
  props: {
    addDialogDepart: {
      type: Boolean,
      default: false
    },
    nodeData: {
      type: Object
    },
    departsList: {
      type: Array
    }
  },
  data() {
    // rule 校验相关的说明，比如校验是那个字段（没啥用）
    // value 校验表单元素的值
    // callback 回调函数，无论校验成功与否，必须调用callback方法
    const validateName = (rule, value, callback) => {
      // 1. value 根据老父亲 nodeData.id 来找所有儿子（item.pid）, 过滤出所有兄弟
      const arr = this.departsList.filter(
        (item) => item.pid === this.nodeData.id
      )
      // 同级部门不能有重复的部门名字
      // 2. 只要 value 和 arr 中任意一个部门的 name 相等，就不通过校验
      // some知识点
      // 点1:如果有一个元素满足条件，则表达式返回true , 剩余的元素不会再执行遍历。
      // 点2:如果没有满足条件的元素，则返回false。
      const bool = arr.some((item) => item.name === value)
      // 3. 判断，是否重复
      bool ? callback(new Error('出现了重名的部门')) : callback()
    }
    const valuedatacode = (rule, value, callback) => {
      //所有部门都不应该有重复的部门编码，所以遍历所有的数据
      const bool = this.departsList.some((item) => item.code === value)
      bool ? callback(new Error('出现了重复的部门编码')) : callback()
    }
    return {
      loderList: '',
      form: {
        name: '',
        code: '',
        introduce: '',
        manager: '',
        pid: ''
      },
      rules: {
        name: [
          {
            required: true,
            message: '请输入部门名称',
            trigger: ['blur', 'change']
          },
          {
            min: 1,
            max: 10,
            message: '部门名称1到10个字符',
            trigger: ['blur', 'change']
          },
          { validator: validateName, trigger: ['blur', 'change'] }
        ],
        code: [
          {
            required: true,
            message: '请输入部门编码',
            trigger: ['blur', 'change']
          },
          {
            min: 1,
            max: 10,
            message: '部门编码1到10个字符',
            trigger: ['blur', 'change']
          },
          { validator: valuedatacode, trigger: ['blur', 'change'] }
        ],
        manager: [
          {
            required: true,
            message: '请选择部门负责人',
            trigger: ['blur', 'change']
          }
        ],
        introduce: [
          {
            required: true,
            message: '请输入部门介绍',
            trigger: ['blur', 'change']
          },
          {
            min: 1,
            max: 300,
            message: '部门介绍1到300个字符',
            trigger: ['blur', 'change']
          }
        ]
      }
    }
  },
  methods: {
    closeDialog() {
      //update是一个固定的写法，后面跟的是要修改的值
      // this.$emit('closeDialog')
      this.$emit('update:addDialogDepart', false)
    },
    async getlist() {
      const { data } = await getsimplementlistApi()
      this.loderList = data
    }
  }
}
</script>
<style scoped></style>
